<script setup lang="ts">
import { computed, ref } from 'vue'
import chart from '@/components/common/chart.vue'

const props = defineProps<{
  data:  object,
  height?: string,
  width?: string,
}>()

const width = props.width || '100%';
const height = props.height || '100%';

const options = computed(() => {
  let opt = {
    series: [
      {
        type: 'treemap',
        width: '100%',
        height: '85%',
        roam: false,
        nodeClick: false,
        breadcrumb: {
          show: false
        },
        label: {
          position: 'insideTopLeft',
          formatter: (params) => {
            const ratio = (params.treeAncestors[params.treeAncestors.length - 1].value / params.treeAncestors[0].value * 100).toFixed(0);
            return `{a|${params.name}}\n{b|${params.value}}\n{c|${ratio}%}`;
          },
          rich: {
            a: {
              fontSize: 16,
              lineHeight: 40,
              fontWeight: 400,
              color: '#ffffff'
            },
            b: {
              fontSize: 32,
              lineHeight: 36,
              fontWeight: 600,
              color: '#ffffff'
            },
            c: {
              fontSize: 32,
              lineHeight: 36,
              fontWeight: 600,
              color: '#ffffff'
            }
          },
        },
        data: props.data
      }
    ],
  }
  return opt;
})

</script>

<template>
  <div :style="{ width: `${width}`, height: `${height}` }" class="chart-box">
    <chart class="chart" :options="options" />
  </div>
</template>

<style scoped lang="stylus">
.chart-box {
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>